<!--vue模板-->
<template>
  <!--按钮-->
  <div class="nav">
    <el-button type="primary" @click="isShowDialog = true">添加部门</el-button>
  </div>
  <!--树和工作区-->
  <el-row class="hgt">
    <!--部门树-->
    <el-col :span="5" class="hgt">
      <el-tree
        :props="defaultProps"
        @node-click="queryChild"
        :data="treeData"
        :load="queryDeptTree"
        class="hgt"
        lazy
        show-checkbox
        ref="deptTree"
      />
    </el-col>
    <el-col :span="1">&nbsp;</el-col>
    <el-col :span="18">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="code"
          label="编码"
          width="180"
          header-align="center"
        />
        <el-table-column prop="name" label="名称" header-align="center" />
        <el-table-column prop="isBrand" label="是否分公司" />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="180"
        >
          <template v-slot="{ row }">
            <el-button type="primary">修改</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--保存或修改对话框-->
  <save-or-update
    v-model:visible="isShowDialog"
    ref="saveupdate"
    @refreshData="loaddata"
  ></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "leaf",
      },
      tableData: [],
      treeData: [], //树形数据
      pid: "0", //部门父id
      isShowDialog: false,
    };
  },
  components: {
    SaveOrUpdate,
  },
  methods: {
    loaddata() {
      this.pid = "";
      this.$http.get("/api/dept/child", { pid: this.pid }).then((res) => {
        if (res.code == 200) {
          this.treeData = res.result;
        }
      });
    },
    //查询部门树
    queryDeptTree(node, resolve) {
 
      if (node.data.id) {
        //点击节点触发的事件
        this.pid = node.data.id;
      }
      this.$http.get("/api/dept/child", { pid: this.pid }).then((res) => {
        if (res.code == 200) {
          resolve(res.result);
        }
      });
    },
    //查义子部门
    queryChild(node) {
      this.$http.get("/api/dept/child", { pid:node.id }).then((res) => {
        if (res.code == 200) {
            this.tableData=res.result;
        }
      });
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-tree) {
  border-style: none;
  border-right: #ccc solid 1px;
}

.hgt {
  height: 98%;
}

.nav {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
</style>
